<template>
  <div class="searchemployees">
    <h3>搜索到{{ tableData1.list.length }}条员工信息</h3>
    <el-input
      v-model="textarea"
      style="width: 220px"
      placeholder="请输入关键字"
    />&nbsp;&nbsp;&nbsp;
    <el-select v-model="value" clearable placeholder="Select">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      /> </el-select
    >&nbsp;&nbsp;&nbsp;
    <el-button type="primary" @click.prevent="searchlist()" round>
      查询
    </el-button>

    <hr />
    <div class="example-demonstration">
      <el-table :data="tableData.list" border style="width: 100%">
        <el-table-column prop="id" label="身份证号" width="200" />
        <el-table-column prop="name" label="员工姓名" />
        <el-table-column prop="num" label="员工工号" />
        <el-table-column prop="address" label="家庭地址" />
        <el-table-column prop="phone" label="手机号码" />
        <el-table-column prop="time" label="创建日期" />
        <el-table-column prop="sex" label="状态(是否正常)" />
        <el-table-column prop="sex1" label="分配状态(是否分配)" />
        <el-table-column prop="" label="操作" width="300">
          <template #default="scope">
            <el-button type="primary" @click.prevent="editRow(scope.row)" round
              >编辑</el-button
            >
            <el-button
              type="primary"
              @click.prevent="deleteRow(scope.row)"
              round
              >删除</el-button
            >
            <el-button type="primary" @click.prevent="search(scope.row)" round
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->

    <div class="demo-pagination-block">
      <el-pagination
        v-model:currentPage="currentPage2"
        v-model:page-size="pageSize2"
        :page-sizes="[5, 10, 15, 20]"
        layout="sizes, prev, pager, next"
        :total="tableData1.list.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import axios from "axios";
// 引入封装API
import {
  user_list,
  delete_user_list,
  searchuseinfo_user_list,
} from "@/utils/employeesApis.js";
import { useRouter } from "vue-router";
import { ref, reactive, onMounted } from "vue";
//引入路由
var router = useRouter();
// let num = ref();
const textarea = ref("");
const value = ref("");
const options = [
  // {
  //   value: "*",
  //   label: "全部",
  // },
  {
    value: "id",
    label: "编号",
  },
  {
    value: "name",
    label: "员工姓名",
  },
  // {
  //   value: "性别",
  //   label: "性别",
  // },
  // {
  //   value: "部门",
  //   label: "部门",
  // },
  {
    value: "num",
    label: "员工工号",
  },
  {
    value: "phone",
    label: "手机号码",
  },
  // {
  //   value: "状态",
  //   label: "状态",
  // },
  // {
  //   value: "职位级别",
  //   label: "职位级别",
  // },
  // {
  //   value: "职务类别",
  //   label: "职务类别",
  // },
  {
    value: "sex1",
    label: "分配状态",
  },
  {
    value: "sex",
    label: "职位状态",
  },
  {
    value: "email",
    label: "邮箱",
  },
  // {
  //   value: "短号",
  //   label: "短号",
  // },
  {
    value: "time",
    label: "创建日期",
  },
];
const tableData = reactive({ list: [] });
const tableData1 = reactive({ list: [] });

//分页
const currentPage2 = ref(5);
const pageSize2 = ref(10);
const handleSizeChange = (val) => {
  console.log(`${val} 一页多少条`);
  axios
    .get("/api/get/news", {
      params: {
        pageindex: currentPage2.value,
        pagesize: pageSize2.value,
      },
    })
    .then((res) => {
      console.log(res);
      tableData.list = res.data.list;
    });
};
const handleCurrentChange = (val) => {
  console.log(`第几页: ${val}`);
  axios
    .get("/api/get/news", {
      params: {
        pageindex: currentPage2.value,
        pagesize: pageSize2.value,
      },
    })
    .then((res) => {
      console.log(res);
      tableData.list = res.data.list;
    });
  // console.log("ceshi", currentPage2.value, pageSize2.value);
};
onMounted(() => {
  axios
    .get("/api/get/news", {
      params: {
        pageindex: currentPage2.value,
        pagesize: pageSize2.value,
      },
    })
    .then((res) => {
      console.log(res);
      tableData.list = res.data.list;
    });
});
//获取数据的长度
var length = () => {
  var a = JSON.parse(localStorage.getItem("zqq_user_list"));
  tableData1.list = a.list;
  console.log("tableData1", tableData1.list.length);
  return tableData1.list;
};
// 查询/搜索list
var searchlist = () => {
  axios
    .post("/api/user/search", { id: textarea.value, num: value._value })
    .then((res) => {
      console.log("search", res);
      //   console.log("num", value._value);
      // console.log("tableData.list", tableData.list);
      tableData.list = res.data.list;
      length();
    });
};
// 删除员工信息
var deleteRow = (row) => {
  delete_user_list({ id: row.id }).then((res) => {
    console.log("delete", res.data);
    axios
      .get("/api/get/news", {
        params: {
          pageindex: currentPage2.value,
          pagesize: pageSize2.value,
        },
      })
      .then((res) => {
        console.log(res);
        tableData.list = res.data.list;
        length();
      });
  });
};
//查看员工基本信息
var search = (row) => {
  console.log(row);
  searchuseinfo_user_list({ id: row.id }).then((res) => {
    console.log("searchuseinfo_user_list", res.data);
    router.push({
      path: "/index/home/zqq/employees/useinfoemployees",
      query: row,
    });
  });
};
//编辑员工信息
var editRow = (row) => {
  console.log(row);
  searchuseinfo_user_list({ id: row.id }).then((res) => {
    router.push({
      path: "/index/home/zqq/employees/modifyemployees",
      query: row,
    });
  });
};

// 获取员工长度
onMounted(() => {
  length();
});
</script>

<style lang="scss" scoped>
.searchemployees {
  > h3 {
    text-align: center;
    height: 100px;
    line-height: 60px;
  }
}
</style>